<script setup lang="ts">
import { ref } from 'vue'
import CacheManager from './componets/CustomNavbar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import type { BannerItem, CateegoryItem, HotItem } from '@/types/home'
import CategoryPanel from './componets/CategoryPanel.vue'
import HotPanel from './componets/HotPanel.vue'
import type { XtxGuessInstance } from '@/types/component'
import skeleton from './componets/skeleton.vue'
// 轮播图
let bannerData = ref<BannerItem[]>([])
const getbanner = async () => {
  const data = await getBannerAPI(1)
  bannerData.value = data.result
}
//分类
let categerData = ref<CateegoryItem[]>([])
const getcateger = async () => {
  const data = await getHomeCategoryAPI()
  categerData.value = data.result
}
//页面推荐
let HotPanelData = ref<HotItem[]>([])
const getHotPanel = async () => {
  const data = await getHomeHotAPI()
  HotPanelData.value = data.result

}
//获取猜你喜欢组件 需要对应的组件类型
const XtxGuessRef = ref<XtxGuessInstance>()
//下拉刷新
const istriggered = ref(false)
const getrefresherrefresh = async () => {
//   重新获取信息
  istriggered.value = true
  await Promise.all([getbanner(), getcateger(), getHotPanel(), XtxGuessRef.value?.reset()])
  istriggered.value = false

}
//   重置子组件页
//上滑动更新
const getscrolltolower = () => {
  XtxGuessRef.value?.getList()
}
// 骨架屏
// 页面初始化
onLoad(async () => {
  getbanner()
  getcateger()
  getHotPanel()
})


</script>

<template>
  <CacheManager></CacheManager>
  <skeleton
    v-show="istriggered"

  ></skeleton>

  <scroll-view
    refresher-enabled
    @refresherrefresh="getrefresherrefresh"
    @scrolltolower="getscrolltolower"
    :refresher-triggered="istriggered"
    class="scroll-view"
    scroll-y
    v-show="!istriggered"
  >
    <XtxSwiper :list="bannerData" />
    <CategoryPanel :list="categerData" />
    <HotPanel :list="HotPanelData" />
    <XtxGuess ref="XtxGuessRef" />
  </scroll-view>

</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
}
</style>
